<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="12" :xs="24">
        <el-form
          ref="cloudStorageForm"
          :model="cloudStorageModel"
          :rules="cloudStorageRules"
          label-width="150px"
        >
          <el-row>
            <el-form-item prop="type" label="存储类型">
              <el-radio-group v-model="cloudStorageModel.type" @change="selectCloudStorage()">
                <el-radio :label="0">七牛云</el-radio>
                <el-radio :label="1">阿里云</el-radio>
                <el-radio :label="2">腾讯云</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item prop="bucket" label="空间名称">
              <el-input v-model="cloudStorageModel.bucket" placeholder="请输入空间名称" />
            </el-form-item>
            <el-form-item prop="region" label="所属区域">
              <el-input v-model="cloudStorageModel.region" placeholder="请输入所属区域" />
            </el-form-item>
            <el-form-item prop="domain" label="访问域名">
              <el-input v-model="cloudStorageModel.domain" placeholder="请输入访问域名" />
            </el-form-item>
            <el-form-item prop="prefix" label="路径前缀">
              <el-input v-model="cloudStorageModel.prefix" placeholder="请输入路径前缀" />
            </el-form-item>
            <el-form-item v-if="cloudStorageModel.type === 0" prop="accessKey" label="AccessKey">
              <el-input v-model="cloudStorageModel.accessKey" placeholder="请输入AccessKey" />
            </el-form-item>
            <el-form-item v-if="cloudStorageModel.type === 0" prop="secretKey" label="SecretKey">
              <el-input v-model="cloudStorageModel.secretKey" placeholder="请输入SecretKey" />
            </el-form-item>
            <el-form-item v-if="cloudStorageModel.type === 1" prop="accessKey" label="AccessKey ID">
              <el-input v-model="cloudStorageModel.accessKey" placeholder="请输入AccessKey ID" />
            </el-form-item>
            <el-form-item v-if="cloudStorageModel.type === 1" prop="secretKey" label="AccessKey Secret">
              <el-input v-model="cloudStorageModel.secretKey" placeholder="请输入AccessKey Secret" />
            </el-form-item>
            <el-form-item v-if="cloudStorageModel.type === 2" prop="accessKey" label="Secret ID">
              <el-input v-model="cloudStorageModel.accessKey" placeholder="请输入Secret ID" />
            </el-form-item>
            <el-form-item v-if="cloudStorageModel.type === 2" prop="secretKey" label="Secret Key">
              <el-input v-model="cloudStorageModel.secretKey" placeholder="请输入Secret Key" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="updateCloudStorage()">保存配置</el-button>
              <el-button type="primary" @click="resetCloudStorage()">还原配置</el-button>
            </el-form-item>
          </el-row>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getValueByKey, updateValueByKey } from '@/api/sysConfig'
export default {
  name: 'CloudStorage',
  props: {},
  data() {
    return {
      cloudStorageModel: {
        type: null,
        bucket: null,
        region: null,
        domain: null,
        prefix: null,
        accessKey: null,
        secretKey: null
      },
      cloudStorageRules: {
        bucket: [{ required: true, trigger: 'blur', message: '请输入空间名称' }],
        region: [{ required: true, trigger: 'blur', message: '请输入所属区域' }],
        domain: [{ required: true, trigger: 'blur', message: '请输入访问域名' }],
        prefix: [{ required: true, trigger: 'blur', message: '请输入路径前缀' }],
        accessKey: [{ required: true, trigger: 'blur', message: '请输入accessKey' }],
        secretKey: [{ required: true, trigger: 'blur', message: '请输入secretKey' }]
      }
    }
  },
  created() {
    this.loadCloudStorageModel()
  },
  mounted() {},
  methods: {
    loadCloudStorageModel() {
      getValueByKey({ 'key': 'CLOUD_STORAGE_CONFIG' }).then((response) => {
        if (response.code === 200) {
          const cloudStorageJSON = JSON.parse(response.data)
          this.cloudStorageModel = cloudStorageJSON
        }
      })
    },
    selectCloudStorage() {
      this.cloudStorageModel.bucket = null
      this.cloudStorageModel.region = null
      this.cloudStorageModel.domain = null
      this.cloudStorageModel.prefix = null
      this.cloudStorageModel.accessKey = null
      this.cloudStorageModel.secretKey = null
    },
    updateCloudStorage() {
      this.$refs.cloudStorageForm.validate(valid => {
        if (valid) {
          const cloudStorageKV = {
            'key': 'CLOUD_STORAGE_CONFIG',
            'value': JSON.stringify(this.cloudStorageModel)
          }
          updateValueByKey(cloudStorageKV).then((response) => {
            if (response.code === 200) {
              this.$notify.success({ title: '系统提示', message: response.msg })
            }
          })
        } else {
          return false
        }
      })
    },
    resetCloudStorage() {
      this.loadCloudStorageModel()
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
